<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./element.css">
    <!-- 引入组件库 -->
    <link rel="stylesheet" href="./common.css">

    <style>
        .title {
            font-size: 20px;
            font-weight: 600;
            font-family: fangsong;
            border-bottom: 1px solid #aaa;
            margin-bottom: 32px;
        }

        .el-collapse {
            border-top: 1px solid #122840 !important;
            border-bottom: 1px solid #122840 !important;
            margin-bottom: 12px;

        }

        .el-collapse-item__wrap,
        .el-collapse .el-collapse-item__header {
            background-color: #122840 !important;
            border: 1px solid #122840 !important;
            color: #fff;
        }

        .el-collapse .el-collapse-item__header {
            padding-left: 16px;
            border-bottom: 1px solid #324256 !important;
        }

        .el-collapse-item__content {
            padding: 12px 12px;
        }

        .el-collapse-item {
            /* margin-bottom: 12px; */
        }

        .el-textarea__inner {
            resize: none;
            border-color: transparent !important;
            background-color: #122840 !important;
            color: #a8c1d4;
            padding: 0;
        }

        .el-textarea__inner:hover {
            border-color: transparent !important;
            background-color: #122840 !important;

        }

        .files {
            display: flex;
            align-items: center;
            padding: 16px 0 0;
            box-sizing: border-box;
        }

        .file {
            width: 100px;
            height: 100px;
            overflow: hidden;

        }

        .upload {
            background-image: url(./images/tupian.png);
            background-size: cover;
            background-repeat: no-repeat;
        }

        .time {
            color: #999;
        }

        .txt {
            color: #a8c1d4;

        }
    </style>
</head>
<script src="./vue.js"></script>
<script src="./axios.js"></script>
<script src="./element.js"></script>
<script src="./dayjs.min.js"></script>
<script src="./common.js"></script>


<body>
    <div id="app">
        <div class="head">
            <div class="logo">
                <img class="logo-img" src="./images/kefuzhiyuan.png" alt="">
            </div>
            <el-dropdown>
                <span class="el-dropdown-link">
                    <img class="user-icon" src="./images/user.png" alt="">
                    用戶名稱<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item><span @click="onNav('faceback')">創建工單</span></el-dropdown-item>
                    <el-dropdown-item><span @click="onNav('contact')">服務記錄</span></el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div class="content">
            <img class="dabeijing" src="./images/dabeijing.png" alt="">
            <img src="./images/fuwuxianqging.png" alt="">
            <div class="title"></div>
            <el-collapse v-model="openKey" v-for="item in result" :key="item.id">
                <el-collapse-item v-if="item.asktime" :title="`问题：${item.askcontent.length>30?item.askcontent.substring(0,30)+'...':item.askcontent}`" name="item.id"
                    >
                    <p style="color:#fff">{{item.askcontent}}</p>
                    <div class="files">
                        <div class="file" v-for="(j,k) in item.images.split(',')" :key="'imgask'+k">
                            <el-image style="width: 100%; height: 100%" :src="url"
                                :preview-src-list="item.images.split(',')">
                            </el-image>
                        </div>
                        <div class="file " v-if="item.image">
                            <video :src="item.image" controls autoplay></video>
                        </div>
                    </div>
                </el-collapse-item>
                <el-collapse-item v-if="item.stateName" :title=`當前狀態：${item.stateName}` name="title" disabled>
                </el-collapse-item>
                <el-collapse-item v-for="(v,i) in item.answer" title="客服回復" :name="'answer'+v.id">
                    <div class="time">回復時間：{{formatTime(v.answertime)}}</div>
                    <p class="txt">{{v.answercontent}}</p>
                </el-collapse-item>
            </el-collapse>
            <el-collapse v-model="activeNames" @change="onTrigger">
                <el-collapse-item :title="`继续追问`" name="zhuiwen">
                    <div>
                        <el-input type="textarea" v-model="textarea" class="textarea" :rows="2" placeholder="请输入内容">
                        </el-input>
                        <div class="files">
                            <div class="file " v-for="(item,index) in images" :key="'img'+index">
                                <div class="upload-del-icon" @click="onDelFile(index,'img')">
                                    <i class="el-icon-delete "></i>
                                </div>
                                <el-image style="width: 100%; height: 100%" :src="item" :preview-src-list="images">
                                </el-image>
                            </div>
                            <div class="file upload" v-if="images.length<3">
                                <input type="file" accept=".jpeg,.jpg,.png" style="width: 100%;height: 100%;opacity: 0;"
                                    @change="(e)=>this.onUpload(e,'img')">
                            </div>
                            <div class="file " v-if="video">
                                <div class="upload-del-icon" @click="onDelFile(0,'video')">
                                    <i class="el-icon-delete "></i>
                                </div>
                                <video :src="video" controls autoplay></video>
                            </div>
                            <div class="file upload-video" v-else>
                                <input type="file" accept=".mp4" style="width: 100%;height: 100%;opacity: 0;"
                                    @change="(e)=>this.onUpload(e,'video')">
                            </div>
                        </div>
                    </div>
                </el-collapse-item>
            </el-collapse>

            <img class="submit" v-if="activeNames.length>0" src="./images/tijiao.png" alt="" @click="onSubmit">
        </div>
        <img src="./images/dibu.png" alt="" class="foot">
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                activeNames: [],
                openKey:[],
                result: [],
                query: {
                    user: '',
                    id: ''
                },
                textarea: '',
                images: [],
                video: '',
                loading: false
            },

            mounted() {
                const query = getParams(window.location.search)
                this.query = query
                this.getData()
            },
            methods: {
                onSubmit() {
                    if (!this.textarea.trim()) {
                        this.$message({
                            message: '請輸入追問内容',
                            type: 'warning'
                        });
                        return
                    }
                    if (this.loading) {
                        this.$message({
                            message: '資源上傳中，請稍後再試!',
                            type: 'warning'
                        });
                        return
                    }
                    const formData = new FormData()
                    formData.append('askcontent', this.textarea)
                    formData.append('image', this.video)
                    formData.append('images', this.images.join(','))
                    formData.append('user_id', this.query.user)
                    formData.append('parentid', this.query.id)
                    axios.post(`https://cs3.maoxiandao.xin/index.php/api/index/putAsk`, formData).then(res => {
                        if (res.data.code == 200) {
                            window.location.href = './contact.html?user=' + this.query.user

                        }
                    }).catch(err => {
                        console.log(err)
                    })

                },
                async onUpload(e, type) {
                    if (this.loading) {
                        this.$message({
                            message: '資源上傳中，請稍後再試!',
                            type: 'warning'
                        });
                        return
                    }
                    this.loading = true
                    const file = e.target.files[0]
                    const fileSize = file.size;
                    let size = fileSize / 1024;
                    if (type == 'img') {
                        if (size > 5 * 1024) {
                            file.value = "";
                            this.$message({
                                message: '文件大小不能大于5M！',
                                type: 'warning'
                            });
                            return '文件大小不能大于100M！';
                        }
                    } else {
                        if (size > 100 * 1024) {
                            file.value = "";
                            this.$message({
                                message: '文件大小不能大于100M！',
                                type: 'warning'
                            });
                            return '文件大小不能大于100M！';
                        }
                    }

                    if (size <= 0) {
                        file.value = "";
                        this.$message({
                            message: '文件大小不能为0M！',
                            type: 'warning'
                        });
                        return '文件大小不能为0M！';
                    }

                    const formData = new FormData()
                    formData.append('file', e.target.files[0])
                    this.$notify({
                        title: '提示',
                        message: '資源上傳中...',
                        type: 'warning'
                    });
                    if (type == 'img') {
                        this.images.push(await upload(formData))

                    } else {
                        this.video = await upload(formData)
                    }
                    e.target.value = ''
                    this.$notify.closeAll()
                    this.loading = false
                },
                onDelFile(index, type) {
                    if (type == 'img') {
                        this.images.splice(index, 1)

                    } else {
                        this.video = ''
                    }
                },
                onTrigger(e) {
                },
                onNav(type) {
                    window.location.href = `./${type}.html?user=${this.query.user}`
                },
                getData() {
                    this.openKey = []
                    axios.get(`https://cs3.maoxiandao.xin/index/index/askDetail?user_id=${this.query.user}&id=${this.query.id}`).then(res => {

                        if (res.data.code == 200) {
                            const result = res.data.data.reduce((prev, cur, index) => {
                                if (cur.askcontent) {//提问
                                    this.openKey.push(cur.id)

                                    prev.push({
                                        ...cur,
                                        answer: []
                                    })
                                } else if (cur.answercontent && cur.answertime && cur.parentid > 0) { // 回复
                                    this.openKey.push('answer'+cur.id)
                                    prev[prev.length - 1].answer.push(cur)
                                }
                                return prev
                            }, [])
                            this.result = result
                            console.log(result)
                            // this.data = result.data.filter(item => item.type == "客服反馈")
                            // this.question =  result.data.find(item => item.type == "用户首次提交")
                            // this.content = result.data.find(item => item.type == "用户提交")
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                },
                formatTime(time) {
                    return formatTime(time)
                }
            }

        })
    </script>
</body>

</html>